Ext
		.define(
				'Lia.controller.Aplication',
				{
					extend : 'Ext.app.Controller',
					config : {
						refs : {
							mainView : "mainview",
							editorView : "editorview",
							listCarView : "listcarview",
							mapCarView : "mapcarview",
							mainMapView : "mainmapview"
						},
						control : {
							'#backButtonList' : {
								tap : 'onBackToHomeCommand'
							},
							'#backButtonCar' : {
								tap : 'onBackToListCar'
							},

							'#searchBtnMain' : {
								tap : 'onSearchCar'
							},
							'#selectMarca' : {
								change : 'onSelectMarca'
							},
							'#addCar' : {
								tap : 'onAddCar'
							},
							'#searchBtn' : {
								keyup : 'onSearchKeyup',
								clearicontap : 'onSearchClearIconTap'
							},
							'#carsList' : {
								disclose : 'onCarListDisclose'
							},
							'#EditorCar' : {
								// The commands fired by the note editor.
								saveNoteCommand : "onSaveNoteCommand",
								deleteNoteCommand : "onDeleteNoteCommand",
								backToHomeCommand : "onBackToHomeCommand"
							}

						}
					},
					// Transitions
					slideLeftTransition : {
						type : 'slide',
						direction : 'left'
					},
					slideRightTransition : {
						type : 'slide',
						direction : 'right'
					},
					maskedform : {
						xtype : 'loadmask',
						message : 'Por favor espere... '
								+ '<hr>Procesando Operación'
								+ '<code>...</code>'
					},
					onSelectMarca : function(a) {
						Ext.getStore("StoreModelo").clearFilter();
						if (a.getValue() != 'Todos')
							Ext.getStore("StoreModelo").filter('marcaid',
									a.getValue());
					},
					onSearchCar : function(a, b, c) {
						var store = Ext.getStore('StoreCar');
						store.clearFilter();
						if (a.parent.parent.getValues().marca != 'Todos')
							store.filter("modelo.marca.name", a.parent.parent
									.getValues().marca);
						if (a.parent.parent.getValues().modelo != 'Todos')
							store.filter("modelo.name", a.parent.parent
									.getValues().modelo);
						if (a.parent.parent.getValues().color != 'Todos')
							store.filter("color",
									a.parent.parent.getValues().color);
						store.filter("precioMax",
								a.parent.parent.getValues().precioMax[0]);
						store.filter("precioMin",
								a.parent.parent.getValues().precioMin[0]);

						Ext.Viewport.setMasked(this.maskedform);
						var main = this.getListCarView();
						main.getStore().load({
							params : {
								start : 0,
								limit : 10,
								page : 1
							},
							callback : function(records, operation, success) {
								Ext.Viewport.animateActiveItem(main, {
									type : 'slide',
									direction : 'left'
								});
								Ext.Viewport.setMasked(false);
							}
						});

					},
					onBackToHomeCommand : function() {
						Ext.Viewport.animateActiveItem(this.getMainView(),
								this.slideRightTransition);
					},
					onBackToListCar : function() {
						Ext.Viewport.animateActiveItem(this.getListCarView(),
								this.slideRightTransition);
					},
					onSaveNoteCommand : function() {

						var mainView = this.getMainView();
						var editView = this.getEditorView();
						var notesStore = Ext.getStore("StoreCar");
						var main = this.getMainView();
						Ext.Viewport.setMasked(this.maskedform);
						editView.submit({
							url : '/car/create',
							method : 'POST',
							waitMsg : {
								message : 'Procesando...'
							},
							success : function() {
								/*
								 * var value = editView.getValues();
								 * notesStore.add(values); editView.reset();
								 */
								Ext.Viewport.setMasked(false);
								Ext.Msg.alert('Info', 'Operación con Exito.');
								Ext.Viewport.animateActiveItem(main, {
									type : 'slide',
									direction : 'right'
								});
							},
							failure : function() {
								Ext.Msg.alert('Error',
										'Fallo el proceso de Grabado.');
							}
						});

					},

					onDeleteNoteCommand : function() {

						var editorView = this.getEditorView();
						var currentNote = editorView.getRecord();
						var notesStore = Ext.getStore("StoreCar");
						var main = this.getMainView();
						Ext.Viewport.setMasked(this.maskedform);

						editorView
								.submit({
									url : '/car/delete/' + currentNote.data.vin,
									method : 'GET',
									waitMsg : {
										message : 'Procesando...'
									},
									success : function() {
										notesStore.remove(currentNote);
										editorView.reset();
										Ext.Viewport.setMasked(false);
										Ext.Msg.alert('Info',
												'Eliminacion Con Exito.');
										Ext.Viewport.animateActiveItem(main, {
											type : 'slide',
											direction : 'right'
										});
									},
									failure : function() {
										Ext.Msg
												.alert('Error',
														'Fallo el proceso de Eliminacion.');
									}
								});

					},
					onAddCar : function() {
						this.getEditorView().reset();
						Ext.Viewport.animateActiveItem(this.getEditorView(),
								this.slideLeftTransition);
					},
					onCarListDisclose : function(list, record, target, index,
							evt, options) {
						Ext.Viewport.setMasked(this.maskedform);
						var mapview = this.getMapCarView();
						var infowindow = new google.maps.InfoWindow();

						geocoder = new google.maps.Geocoder();
						geocoder
								.geocode(
										{
											'address' : record.data.adress
										},
										function(results, status) {
											if (status == google.maps.GeocoderStatus.OK) {

												var mapMarker = new google.maps.Marker(
														{
															map : Ext.ComponentManager
																	.get(
																			'jobmap')
																	.getMap(),
															icon : '../resources/images/car.png',
															title : record.data.marca
																	+ " "
																	+ record.data.modelo
																	+ " "
																	+ record.data.color,
															position : new google.maps.LatLng(
																	results[0].geometry.location
																			.lat(),
																	results[0].geometry.location
																			.lng())
														});

												google.maps.event
														.addListener(
																mapMarker,
																'mousedown',
																function() {
																	infowindow
																			.close();
																	infowindow = new google.maps.InfoWindow(
																			{
																				content : "<div class='infowindow_content'><h2>"
																						+ record.data.marca + "<h2>"
																						+ record.data.modelo
																						+ "</h2><p><a href='"
																						+ ' http://maps.google.com/maps?daddr='+record.data.adress
																						+ "' target='_blank'>Google Maps</a></p></div>"
																			});

																	infowindow
																			.open(
																					Ext.ComponentManager
																							.get(
																									'jobmap')
																							.getMap(),
																					mapMarker);
																});

												// Puntos para Dibujar el Camino
												var start = new google.maps.LatLng(
														50.80520247265613,
														3.274827003479004);

												var end = new google.maps.LatLng(
														results[0].geometry.location
																.lat(),
														results[0].geometry.location
																.lng());

												if (navigator.geolocation) {
													navigator.geolocation
															.getCurrentPosition(function(
																	position) {
																start = new google.maps.LatLng(
																		position.coords.latitude,
																		position.coords.longitude);

																var detected = new google.maps.LatLng(
																		position.coords.latitude,
																		position.coords.longitude);
																var marker = new google.maps.Marker(
																		{
																			position : detected,
																			map : Ext.ComponentManager
																					.get(
																							'jobmap')
																					.getMap()
																		});

																
																directionsDisplay = new google.maps.DirectionsRenderer();
																var directionsService = new google.maps.DirectionsService();
																directionsDisplay
																		.setMap(Ext.ComponentManager
																				.get(
																						'jobmap')
																				.getMap());
																directionsDisplay.setOptions( { suppressMarkers: true } );

																geocoder = new google.maps.Geocoder();

																var request = {
																	origin : start,
																	destination : end,
																	travelMode : google.maps.DirectionsTravelMode.DRIVING
																};
																directionsService
																		.route(
																				request,
																				function(
																						response,
																						status) {
																					if (status == google.maps.DirectionsStatus.OK) {
																						directionsDisplay
																								.setDirections(response);
																					}
																				}); 

															});
												}

												Ext.Viewport.setMasked(false);
												Ext.Viewport.animateActiveItem(
														mapview, {
															type : 'slide',
															direction : 'left'
														});
											}
										});

					},
					onSearchClearIconTap : function() {
						Ext.getStore('StoreCar').clearFilter();
					},
					onSearchKeyup : function(field) {
						// get the store and the value of the field
						var value = field.getValue(), store = Ext
								.getStore('StoreCar');

						// first clear any current filters on thes tore
						store.clearFilter();

						// check if a value is set first, as if it isnt we dont
						// have to do
						// anything
						if (value) {
							store.filter("vin", value);
							Ext.getStore('StoreCar').load({
								start : 0,
								limit : 10,
								page : 1
							});
						}
					}

				});
